<template>
  <div id="personHomepage">
    <div class="content-box">
      <el-row>
        <el-col :span="4">
          <div class="user-head">
            <div class="img-box">
              <img @click="editHeaderImage" :src="imgUrl"/>
            </div>

          </div>
          <div class="header_image-box">
            <el-dialog title="修改头像" v-model="uploadImageDia">
              <crop-image :personalId="personalInfo.id"></crop-image>
            </el-dialog>
          </div>
        </el-col>
        <el-col :span="17" :offset="3">
          <div class="info-box">
            <el-row>
              <el-col :span="10" class="info-label">姓名:</el-col>
              <el-col :span="14" class="info-label">{{ personalInfo.real_name }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="10" class="info-label">性别:</el-col>
              <el-col :span="14" class="info-label">{{ getStaticMapData('sex', personalInfo.sex)}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="10" class="info-label">婚姻状态:</el-col>
              <el-col :span="14" class="info-label">{{ getStaticMapData('marriage', personalInfo.marriage)}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="10" class="info-label">学历:</el-col>
              <el-col :span="14" class="info-label">{{ getStaticMapData('education', personalInfo.end_education) }}
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10" class="info-label">生日:</el-col>
              <el-col :span="14" class="info-label">{{ personalInfo.birthday }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="10" class="info-label">QQ:</el-col>
              <el-col :span="14" class="info-label">{{ personalInfo.qq }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="10" class="info-label">民族:</el-col>
              <el-col :span="14" class="info-label">{{ personalInfo.nation }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="10" class="info-label">政治面貌:</el-col>
              <el-col :span="14" class="info-label">{{ getStaticMapData('political', personalInfo.political) }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="10" class="info-label">身高:</el-col>
              <el-col :span="14" class="info-label">{{ personalInfo.height + 'cm' }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="10" class="info-label">户籍所在地:</el-col>
              <el-col :span="14" class="info-label">{{ personalInfo.native_place }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="10" class="info-label">现居住地:</el-col>
              <el-col :span="14" class="info-label">{{ personalInfo.living }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="10" class="info-label">工作时间:</el-col>
              <el-col :span="14" class="info-label">{{ personalInfo.work_start_date }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="10" class="info-label">自我评价:</el-col>
              <el-col :span="14" class="info-label">{{ personalInfo.evaluation }}</el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import { postDataToServer } from '../../assets/js/post.js'
  import { getStaticMapList } from '../../assets/js/GlobeDefine.js'
  import CropImage from './CropImage'

  export default {
    name: 'personHomepage',
    data () {
      return {
        imgUrl: '../../assets/img/defaultUserImage.jpg',
        personalInfo: {},
        uploadImageDia: false,
      }
    },
    created () {
      this.createdComponent()
    },
    mounted () {
      this.updateComponent()
    },
    methods: {
      createdComponent () {

      },
      updateComponent () {
        let _this = this
        postDataToServer('PERSONAL_GET').then((data) => {
          if (data.status === 0) {
            _this.personalInfo = data.data_list
          }
        })
      },
      getStaticMapData (type, value) {
        return getStaticMapList(type, value)
      },
      editHeaderImage () {
        this.uploadImageDia = true
      }
    },
    components: {
      CropImage
    }
  }
</script>
<style scoped>
  #personHomepage {
    padding: 1em;

  }

  .content-box {
    border: 1px solid black;
  }

  .img-box {
    height: 10em;
    width: 10em;
  }

  .img-box img {
    height: 100%;
    width: 100%;
  }
</style>
